<div class="panel panel-default page-panel logs-page">

  <div class="panel-heading clearfix">
    <div class="panel-title pull-left">
      <h3 translate="logs.title">Logs</h3>
    </div>

    <div class="pull-right">
      <button type="button"
              ng-if="logMessages.length && logEndingOffset !== 0"
              class="btn btn-primary btn-sm"
              ng-disabled="fetchingLog"
              ng-click="loadPreviousLog()">
        <span ng-hide="fetchingLog">
          {{'logs.loadPreviousLog' | translate}}
        </span>

        <span ng-show="fetchingLog">
          {{'logs.loadingLog' | translate}}
        </span>
      </button>

      <div class="btn-group download-btn-group" ng-if="logFiles && logFiles.length">
        <a href="/rest/v1/system/logs/files/{{logFiles[0].file}}?attachment=true" target="_self"
           class="btn btn-primary btn-sm">{{'logs.download' | translate}}</a>
        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu pull-right" role="menu">
          <li ng-repeat="logFile in logFiles">
            <a href="/rest/v1/system/logs/files/{{logFile.file}}?attachment=true" target="_self">{{logFile.file}}</a>
          </li>
        </ul>
      </div>

    </div>

  </div>

  <div class="panel-body" ng-style="{'height': (windowHeight - 60 - 51) + 'px', 'width': (windowWidth) + 'px'}" resize>
    <div class="log-message">
      <span ng-repeat="logMessage in logMessages">{{logMessage}}</span>
    </div>
    <pre ng-if="!logMessages || logMessages.length === 0">{{'logs.emptyMessage' | translate}}</pre>
  </div>
</div>